/* 轮播图-获取元素 */
var box = document.getElementById("box");
var screenBox = box.children[0];
var imgWid = screenBox.offsetWidth;
var ul = screenBox.children[0];
var ol = screenBox.children[1];
var arrBox = box.children[1];
var arrLeft = arrBox.children[0];
var arrRight = arrBox.children[1];
/* 以下是对重复使用的变量进行提前声明 */
var li;

/* 数据展示-获取元素 */
var myChart = echarts.init(document.getElementById('main'));
var myPie = echarts.init(document.getElementById('pie'));
var myColumnar = echarts.init(document.getElementById('columnar'));
var month = [];
var people = [];
var week_one = [];
var week_one_data = [];
var week_two = [];
var week_two_data = []

/* 轮播图 */

/* 创建底部的小方块 */
for (var i = 0; i < ul.children.length; i++) {
    li = document.createElement("li");
    ol.appendChild(li);
}

/* 给第一个小方块设置默认的类名 */
var lisOl = ol.children;
lisOl[0].className = "current";

/* 给小方块添加点击按钮变色和ul运动 */
for (var i = 0; i < lisOl.length; i++) {
    lisOl[i].index = i;
    lisOl[i].onclick = function () {

        if (picCount == lisUl.length - 1) {
            ul.style.left = 0 + "px";
        }

        for (var i = 0; i < lisOl.length; i++) {
            lisOl[i].className = "";
        }
        this.className = "current";

        var target = -this.index * imgWid;
        animate(ul, target);
        picCount = this.index;
    };
}

/* 左右按钮点击运动部分 */
var lisUl = ul.children;
var firstPic = lisUl[0].cloneNode(true);
ul.appendChild(firstPic);
var picCount = 0;

arrRight.onclick = function () {
    if (picCount == lisUl.length - 1) {
        ul.style.left = 0 + "px";
        picCount = 0;
    }

    picCount++;
    animate(ul, -picCount * imgWid);

    for (var i = 0; i < lisOl.length; i++) {
        lisOl[i].className = "";
    }

    if (picCount == lisUl.length - 1) {
        lisOl[0].className = "current";
    } else {
        lisOl[picCount].className = "current";
    }


};

/*  左按钮运动效果 */
arrLeft.onclick = function () {
    if (picCount == 0) {
        ul.style.left = -(ul.offsetWidth - imgWid) + "px";
        picCount = lisUl.length - 1;
    }

    picCount--;
    animate(ul, -picCount * imgWid);

    for (var i = 0; i < lisOl.length; i++) {
        lisOl[i].className = "";
    }

    lisOl[picCount].className = "current";
};

/* 自动播放 */
var timer = null;

timer = setInterval(function () {
    arrRight.click();
}, 2500);


box.onmouseover = function () {
    arrBox.style.display = "block";
    clearInterval(timer);
};
box.onmouseout = function () {
    arrBox.style.display = "none";
    timer = setInterval(function () {
        arrRight.click();
    }, 2500)
};


/* 需要的函数 */
function setText(tag, text) {
    if (tag.innerText === undefined) {
        tag.textContent = text;
    } else {
        tag.innerText = text;
    }
}

function animate(tag, target) {
    clearInterval(tag.timer);
    tag.timer = setInterval(function () {
        var leader = tag.offsetLeft;
        var step = (target - leader) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        leader = leader + step;
        tag.style.left = leader + "px";
        if (leader == target) {
            clearInterval(tag.timer);
        }
    }, 20);
}

/* 曲线图数据展示 */
$.ajax({
    type: 'get',
    url: 'https://edu.telking.com/api/?type=month',
    dataType: 'json',
    success: function (res) {
        this.month = res.data.xAxis;
        this.people = res.data.series;
        /* 指定图表的配置项和数据 */
        var option = {
            title: {
                text: '曲线图数据展示',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                data: this.month
            },
            yAxis: {
                type: 'value',
                name: '人数',
                axisLabel: {
                    formatter: '{value} 人'
                }
            },
            series: [{
                name: '人数',
                type: 'line',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#5196f1'
                    }
                },
                data: this.people,
                smooth: true,
                areaStyle: {}
            }]
        };
        /* 使用刚指定的配置项和数据显示图表。 */
        myChart.setOption(option);
    },
    error: function (error) {
        console.log('获取数据失败！')
    }
})

/* 柱状图和柱状数据展示 */
$.ajax({
    type: 'get',
    url: 'https://edu.telking.com/api/?type=week',
    dataType: 'json',
    success: function (res) {
        this.week_one = res.data.xAxis;
        this.week_one_data = res.data.series;
        /* 指定饼状图表的配置项和数据 */
        var option = {
            title: {
                text: '饼状图属于展示',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '数据',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        /* 指定柱状图表的配置项和数据 */
        var option1 = {
            title: {
                text: '柱状图属于展示',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            xAxis: {
                data: this.week_one
            },
            yAxis: {
                type: 'value',
                name: '商品数'
            },
            series: [{
                name: '商品数',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#5196f1'
                    }
                },
                data: this.week_one_data,
                smooth: true,
                areaStyle: {}
            }]
        };
        var result = [];
        for (var index in this.week_one) {
            result.push({ value: this.week_one_data[index], name: this.week_one[index] });
        }
        option.series[0].data = result;
        myPie.setOption(option);
        myColumnar.setOption(option1);
    }
})
